<template>
	<!-- 大盒子 -->
	<div class="content">
		<!-- 主体内容 -->
		<div class="main">
			<!-- 新增等Model -->
			<div class="addModel">
				<el-dialog
				  title="新增卫材目录"
				  :visible.sync="dialogVisible"
				  width="48%"
				  top="10px"
				  :before-close="handleClose">
				  <div class="form">
					<!-- 表单 -->
					<el-form ref="addForm" :rules="addRules" :model="addForm" size="mini" label-position="right">
						<el-row :gutter="20">
							<el-col :span="v.spanRows" type="flex" v-for="(v,i) in formType" :key="i">
							<!-- select - Other -->
							<el-form-item v-if="v.type == 'select1'" :label="v.label" :prop="v.modelValue">
								<el-select v-model="$data.addForm[v.modelValue]" :disabled="v.disabled ? addDisabled : v.disabled" filterable
								@focus="handlefoucs(v,i)" @change="handleChange" :filter-method="searchMethod" :popper-append-to-body="false">
									<el-option v-for="(item,index) in $data[v.op]" :key="index" :label="item.label" :value="item.id">
										<div id="optionItem">
											<span style="width: 48px;">{{ item.id }}</span>
											<el-tooltip class="item" effect="light" :content="item.chargeProjectName" placement="top">
											    <span style="text-align: left;">{{ item.chargeProjectName }}</span>
											</el-tooltip>
											<el-tooltip class="item" effect="light" :content="item.priceCode" placement="top">
											    <span>{{ item.priceCode }}</span>
											</el-tooltip>
											<el-tooltip class="item" effect="light" :content="item.description" placement="top">
											    <span style="width: 288px;text-align: left;">{{ item.description }}</span>
											</el-tooltip>
										</div>
									</el-option>
								</el-select>
							</el-form-item>
							<!-- select -->
							<el-form-item v-if="v.type == 'select'" :label="v.label" :prop="v.modelValue">
								<el-select v-model="$data.addForm[v.modelValue]" @focus="handlefoucs(v,i)" @change="handleChange">
									<el-option v-for="item in $data[v.op]" :key="item.id" :label="item.label" :value="item.id">
										<div style="font-size: 12px;display: flex;justify-content: space-between;align-items: center;">
											<span>{{ item.id }}</span>
											<span>{{ item.label }}</span>
											<span>{{ item.code }}</span>
										</div>
									</el-option>
								</el-select>
							</el-form-item>
							<!-- input -->
							<el-form-item v-if="v.type == 'input'" :label="v.label" :prop="v.modelValue">
								<el-input v-model="$data.addForm[v.modelValue]" :disabled="v.disabled" @blur="inputChance(v,i)"></el-input>
							</el-form-item>
							<!-- textarea -->
							<el-form-item v-if="v.type == 'textarea'" :label="v.label" :prop="v.modelValue">
								<el-input type="textarea" :rows="3" v-model="$data.addForm[v.modelValue]"></el-input>
							</el-form-item>
							<!-- table -->
<!-- 							<el-form-item v-if="v.type == 'table'" :label="v.label" >
								
							</el-form-item> -->
							</el-col>
						</el-row>
					</el-form>
					<!-- 生产厂家表格 -->
					<div style="display: flex;justify-content: space-between;background: #00557f;align-items: center;">
						<span style="font-size: 12px;color: #fff;margin-left: 12px;">生产厂家</span>
						<li style="list-style-type: none;margin-right: 12px;">
							<el-button v-for="(v,i) in boxaBtn" :key="i" :type="v.type" :icon="v.icon" size="medium" 
							@click="boxaBtnHandClick(i)"></el-button>
						</li>
					</div>
					<!-- 在template部分修改innerModel-table部分 -->
					<div class="innerModel-table" style="margin-top: 8px;">
					  <el-table 
					    style="width: 100%;" 
					    :data="tableData" 
					    v-loading="loading" 
					    ref="singleTable" 
					    border
					    :max-height="400"
					  >
					  
					    <!-- 表格行rows -->
					    <!-- <el-table-column prop="id" label="系统序号"></el-table-column> -->
					    <el-table-column 
					      v-for="(col, inx) in tableRows" 
					      :key="inx" 
					      :type="col.type" 
					      :prop="col.prop" 
					      :label="col.name" 
					      :width="innerColumnWidth(col, tableData)"
					      show-overflow-tooltip
					    ></el-table-column>
					    <!-- fixed -->
					    <el-table-column fixed="left" label="行号" type="index" width="48" align="center"></el-table-column>
					  </el-table>
					</div>
					
				  </div>
				  
				  <span slot="footer" class="dialog-footer">
				    <el-button size="mini" type="primary" @click="addSubmit">确 定</el-button>
				    <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
				  </span>
				</el-dialog>
			</div>
		</div>
		<!-- 厂家新增选择Model -->
			<div class="GetManuFact">
				<el-dialog
				  title="新增厂家"
				  :visible.sync="GetManuFactDialogVisible"
				  width="40%"
				  top="48px"
				  :before-close="handleMacnFactClose">
				  <!-- 表单 -->
				  <div class="form">
					<!-- 厂家表单 -->
					<el-form ref="addManFatcRules" :rules="addManFatcRules" :model="addManfacterForm" size="mini">
						<el-row :gutter="20">
							<el-col :xs="v.xs" :sm="v.xs" :md="v.md" :lg="v.lg" :xl="v.xl" type="flex" v-for="(v,i) in addManfacterFormType" :key="i">
								<!-- input -->
								<el-form-item v-if="v.type == 'input'" :label="v.label" :prop="v.modelValue">
									<el-input v-model="$data.addManfacterForm[v.modelValue]"></el-input>
								</el-form-item>
								<!-- select -->
								<el-form-item v-if="v.type == 'selectFirst'" :label="v.label" :prop="v.modelValue">
									<el-select v-model="$data.addManfacterForm[v.modelValue]" :disabled="v.disabled ? addDisabled : v.disabled" filterable
									@focus="handlefoucs(v,i)" @change="handleChangeManfacter" :filter-method="searchMethod" :popper-append-to-body="false">
										<el-option v-for="item in $data[v.op]" :key="item.id" :label="item.label" :value="item.id" v-loading="loading">
											<div id="optionItem">
												<span style="width: 58px;">{{ item.id }}</span>
												<span style="width: 188px;text-align: left;">{{ item.label }}</span>
												<span style="width: 48px;text-align: center;">{{ item.coding }}</span>
												<span style="width: 68px;">{{ item.origin }}</span>
											</div>
										</el-option>
									</el-select>
								</el-form-item>
								<!-- select -->
								<el-form-item v-if="v.type == 'select'" :label="v.label" :prop="v.modelValue">
									<el-select v-model="$data.addManfacterForm[v.modelValue]" filterable placeholder="请选择" :disabled="v.disabled">
									  <el-option v-for="item in $data[v.op]" :key="item.id" :label="item.label" :value="item.id"> 
									    <span style="font-size: 12px">{{ item.label }}</span>
									  </el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				  </div>
				  <span slot="footer" class="dialog-footer">
				    <el-button size="mini" plain type="primary" @click="GetManuFact">保存</el-button>
				    <el-button size="mini" plain type="primary" @click="GetManuFactDialogVisible = false">取 消</el-button>
				  </span>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
// self
import AddType from './AddType.js'
import addManFacterType from './addManFacterType.js' //Form厂家Model表单结构
import addForm from './addForm.js' //Form表单
import Pinyin from "@/external/pinyin.js"; //中译音
// 接口
import { getCostList,standardList,getCostType, getMREC, getSosTypes,addChargeProject } from "@/api/Outpatient/category.js";
// axios
import { getDosaUnt,getDrugUnt } from "@/api/MedicenCata.js";
import { getManufacturer } from "@/api/systemCatalogue/MedicenCata.js"; // 厂家
import { dict } from "@/api/staff/staff.js";

	export default {
		props: ['parentMethod'],
		data() {
			return {
				// str
				inputSearchValue:'',
				// number
				idx:0,
				pageNum: 1, //当前页currentPage
				pageSize: 28, //每页展示条数
				totalSize: 10, //总条数
				// blean
				loading:false,
				dialogVisible:true,
				GetManuFactDialogVisible:false,
				// arr
				tableData:[],
				eisaiIdOptions:[],
				result:[],
				addManfacterForm:{},  //form厂家表单 * 
				ManufacturerData:[], // 厂家数据源
				ManufacturerOptions:[], // 厂家数据源
				tableRows:[
					{ name:"厂家序号", prop:"docNum"},{ name:"厂家名称", prop:"busDate" },
					{ name:"产地", prop:"supplierName" },{ name:"注册商标", prop:"totalAmt" },
					{ name:"注册证号", prop:"reviewName"},{ name:"自付比例", prop:"reviewTime"},
					{ name:"本地药品", prop:"passingOrdersName" },{ name:"中标等级", prop:"passingOrdersTime" },
					{ name:"中标次数", prop:"supplierName" },{ name:"条码值", prop:"totalAmt" },
					{ name:"备注", prop:"reviewName"},{ name:"有效状态", prop:"reviewTime"},
					{ name:"保险编码", prop:"supplierName" },{ name:"国家贯标名", prop:"totalAmt" },
					{ name:"国家贯标码", prop:"reviewName"},{ name:"集采中选", prop:"reviewTime"},
					{ name:"注册型号", prop:"supplierName" },{ name:"注册规格", prop:"totalAmt" },
					{ name:"网采编码", prop:"reviewName"},{ name:"ypid", prop:"ypid"},
				],
				// 厂家信息规则
				addManFatcRules:{
					prodentpId: [{ required: false, message: "请先选择厂家名称！", trigger: "change" }],
					expyDate: [{ required: false,pattern:/^[1-9]\d*(\.\d+)?$/, message: "格式不正确！", trigger: "blur" }],
					ratio: [{ required: false,pattern:/^[1-9]\d*(\.\d+)?$/, message: "格式不正确！", trigger: "blur" }],
				},
				formType:[], // 表单头部内容
				addManfacterFormType:[],
				selectChanceAll:[],// 收费项目名称
				CostIdOptions:[], // 病案费别
				ClassIdOptions:[], // 财务分类
				expenseCategoryIdOptions:[], // 费用费别
				pacUnitOptions:[], // 包装单位
				getMinUntOptions:[], // 最小单位
				statusOption:[{ id:0,label:'可用',value:'可用'},{ id:1,label:'禁用',value:'禁用'}],
				YNOption:[{ id:0,label:'否',value:'否'},{ id:1,label:'是',value:'是'}],
				eisaiAttriOption:[{ id:0,label:'普通',value:'普通'},{ id:1,label:'高质',value:'高质'}], // 卫材属性
				billingScopeOption:[{ id:0,label:'全院',value:'全院'},{ id:1,label:'门诊',value:'门诊'},{ id:2,label:'住院',value:'住院'},{ id:3,label:'不计费',value:'不计费'}], // 计费范围
				// rules
				addRules:{
					eisaiName:[{ required:true,message:'此项必填',trigger:'blur' }],
					eisaiId:[{ required:true,message:'此项必选',trigger:'change' }],
					pacUnit:[{ required:true,message:'此项必选',trigger:'change' }],
					pacCnt:[{ required:true,message:'此项必填',trigger:'blur' }],
				},
				// obj
				addForm:{}, //form表单 * 
				boxaBtn:[{add:"add",type:"text",icon:"el-icon-plus"},{adit:"adit",type:"text",icon:"el-icon-edit"},{del:"del",type:"text",icon:"el-icon-del"}],
				// formTypeMain:[],
			}
		},
		mounted() {
			this.getForm();
			//  获取字典数据
			this.getditc();
			this.pacUnt(); // 包装单位
			this.getDosaUnts(); // 剂量单位 / 最小单位
		},
		methods: {
			/* 数据源 */
			async loadData(){
				let res = await standardList({ name:this.inputSearchValue });
				if(res.code===200){
					this.selectChanceAll = res.data.map(v => {return { label: v.chargeProjectName, ...v}})
				}else{
					this.$message.error(res.message)
					this.selectChanceAll = [];
				}
			},
			/* 数据源 */
			async loadMantfacData(){
				// 厂家接口
				//  模糊搜索接口select函数
				let res = await getManufacturer({
					manufacturerName:this.inputSearchManfactValue,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				})
				if(res.code === 200){
					this.inputSearchManfactValue == '' ? this.loading = false : this.loading = true;
					setTimeout(() =>{
						this.ManufacturerOptions = res.data.content.map(v=>{
							return { id:v.id,prodentpId:v.id,label: v.manufacturerName,origin:v.origin,coding:v.coding}
						})
						// console.log(this.ManufacturerOptions);
						this.loading = false
						this.$message({ type: "success", message: res.message });
					},888)
				}else{
					this.$message.error(res.message)
					// this.NameOptions = [];
				}
			},
			// 字典数据
			async getditc(){
			   this.result = await dict();
			   console.log(this.result.data);
			   // 卫材种类
			   this.eisaiIdOptions = this.result.data.eisaiType.map(v => {return { label: v.name, ...v}})
			},
			// 挂载或销毁前后重新赋值后端参数
			getForm(){
				// 解构赋值排除 list 属性 => 弃用
				// this.addHeadrForm = addForm.map(item => { let { list, ...newItem } = item; return newItem })[0];
				// 左侧提交表单
				this.addForm = addForm.map(v => {return v })[0]; // Form
				// 定义数据来源
				this.formType = AddType.map(function(val) { return val })
				// 厂家表单
				this.addManfacterForm = this.addForm.eisaiList[0]
			},
			// axios
			// 包装单位
			async pacUnt(){
				let res = await getDrugUnt();
				if(res.code===200){ this.pacUnitOptions=res.data.map(v => {return { label: v.name, ...v}}) }else{ this.$message.error(res.message) }
			},
			// 最小单位 && 剂量单位
			async getDosaUnts(){
				let res = await getDosaUnt();
				if(res.code===200){ 
					this.getMinUntOptions = res.data.map(v => {return { label: v.name, ...v}}) }else{ this.$message.error(res.message)
				}
			},
			async axiosGetSosTypes(){
				// 调用财务分类接口
				let rs = await getSosTypes();
				this.ClassIdOptions = rs.data.map(v=>{ return { label: v.name , ...v } })
			},
			async axiosGetCostType(){
			   let res = await getCostType();
			   this.expenseCategoryIdOptions = res.data.map(v=>{ return { label: v.name , ...v } });
			},
			async axiosGetMREC(){
				let res = await getMREC();
				this.CostIdOptions = res.data.map(v=>{ return { label: v.name , ...v } })
			},
			/* props */
			removeAllSpaces(str) {
			  return str.trim().replace(/\s+/g, '');
			},
			// input失焦 简码转换赋值
			inputChance(v,i){
				console.log(v,i);
				if(v.label == '卫材名称' || v.label.includes('卫材名称')){
					this.addForm.aliasName = this.makePy(this.addForm.eisaiName).toUpperCase();
				}
			},
			searchMethod(query, option) {
				query = this.removeAllSpaces(query);
					console.log(query);
					if(query){
						this.loading = true
						this.inputSearchValue = query
						this.pageNum = 0
						this.pageSize = 0
						this.loadMantfacData();
						this.loading = false
					}else{
						this.inputSearchValue = query
						this.pageNum = 1
						this.pageSize = 28
						this.loadMantfacData();
					}
			},
			// select聚焦
			async handlefoucs(v,i){
				this.idx = i;
				console.log(i);
				// i event  suffixIcon 为接口
				switch (i) {
					case 3: 
						// 名称
						this.loadData();
					break;
					case 6:
						// 财务分类
						this.axiosGetSosTypes();
					break;
					case 11:
						// 费用费别
						this.axiosGetCostType();
					break;
					case 12:
						// 病案费别
						this.axiosGetMREC();
					break;
				}
			},
			// 厂家选择变更处理 - 确保正确更新表单数据
			handleChangeManfacter(v) {
			    let Manfacters = this.ManufacturerOptions.find(id => id.prodentpId === v);
			    if (Manfacters) { 
			        this.addManfacterForm = {
			            ...this.addManfacterForm,
			            manufacturerName: Manfacters.label,
			            orplc: Manfacters.origin,
			            id: Manfacters.prodentpId,
			            prodentpId: Manfacters.prodentpId
			        };
			    }
			},
			// 确认保存厂家
			GetManuFact() {
			  // 检查是否已存在相同 prodentpId 的记录
			  const existingIndex = this.ManufacturerData.findIndex(
			    item => item.prodentpId === this.addManfacterForm.prodentpId
			  );
			  
			  if (existingIndex !== -1) {
			    // 如果存在，则更新该记录
			    this.$set(this.ManufacturerData, existingIndex, JSON.parse(JSON.stringify(this.addManfacterForm)));
			    this.$message.success('厂家信息已更新');
				console.log(this.ManufacturerData,'ManufacturerDataManufacturerData')
			  } else {
			    // 如果不存在，则新增记录
			    this.ManufacturerData.push(JSON.parse(JSON.stringify(this.addManfacterForm)));
			    this.$message.success('厂家信息已添加');
				console.log(this.ManufacturerData,'ManufacturerDataManufacturerData')
			  }
			  
			  // 关闭对话框并清空表单
			  this.GetManuFactDialogVisible = false;
			  this.addManfacterForm = {}; // 清空表单
			},
			//新增保存
			async addSubmit(){
				// let res = await addChargeProject(this.addForm)
				console.log(this.addForm,'新增保存');
				//触发验证表单
				this.$refs.addForm.validate(async(valid) => {
				if(valid){
					// let res = await addChargeProject(this.addForm)
					// console.log(res);
					// if (res.code === 200){
					// this.$message({
					// 	message:res.message,
					// 	type:"success"
					// });
					// this.parentMethod(); // 更新数据驱动 => 父组件 shopPlan
					// this.dialogVisible = false
					// }else{
					//   //验证失败
					//   console.log('失败');
					// }
				}
				});
			},
			// selectChance
			handleChange(val){
				// i event  suffixIcon 为接口
				switch (this.idx) {
					case 3: 
						// 根据 selectChanceAll绑定的id 找到对应的对象
						let nameObj = this.selectChanceAll.find(name => name.id === val)
						console.log(nameObj);
						// 开始赋值
						this.mergeObjects(this.addForm, nameObj);
						this.addForm.simpCode = this.makePy(this.addForm.chargeProjectName).toUpperCase()
					break;
				}
			},
			// 打开新增模态框
			open(){
				this.dialogVisible = true;
			},
			// 关闭model
			handleClose(done){
				this.$confirm('确认关闭？')
				.then(_ => {
					this.$refs['addForm'].resetFields(); // 等待 DOM 更新后重置
					done();
				})
				.catch(_ => {});
			},
			// son btn events
			boxaBtnHandClick(i){
				// i event
				switch (i) {
					case 0:
						this.GetManuFactDialogVisible = true;
						this.addManfacterFormType = addManFacterType.map(function(val) { return val }) // 赋值厂家表单
						this.loadData();
						console.log(this.addManfacterForm,'厂家表单')
						break;
					case 1:
						// 处理索引1的逻辑
						if(this.currentTable.length === 0){
							this.$message.warning('请先选择您想要操作的数据!');
						}else{
							this.loadData();
							this.GetManuFactDialogVisible = true;
							this.addManfacterFormType = addManFacterType.map(function(val) { return val }) // 赋值厂家表单
							this.addManfacterForm = this.currentTable
						}
						break;
					case 2:
						// 处理索引2的逻辑 => 新增
						console.log('删除',this.ManufacturerData,this.currentTable)
						
						break;
				}
			},
			// 内层
			innerColumnWidth(col, list){
				let prop = col.prop,lab = col.lab;
				let width = 28; // 设定一个最小值
				let maxlenStr = ""; // 最长字符串
				for (let info of list) { if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop] }
				width = Math.max(width, len(lab), len(maxlenStr));
				// 表格自带的内边距(20px) 自调
				return width + 24; // 这里加了 12px
				function len(str) {
					// 实际分配长度可根据需要自行调整
					let length = 12;
					for (const char of str + "") {
					  // 英文小写字符 8px
					  if ("a" <= char && char <= "z") length += 8;
					  // 英文大写字符 8px
					  else if ("A" <= char && char <= "Z") length += 8;
					  // 中文字符 22px
					  else if (char >= "\u4e00" && char <= "\u9fa5") length += 22;
					  // 其他 8px
					  else length += 12;
					}
					return length;
				}
			},
			// methods ZDY
			// 合并追加对象
			mergeObjects(A, B) {
			  for (const key in B) {
			    if (
			      B.hasOwnProperty(key) &&          // 确保是 B 自身的属性
			      A.hasOwnProperty(key) &&          // 确保 A 中存在该属性
			      B[key] !== undefined &&           // 排除 undefined
			      B[key] !== null &&                // 排除 null
			      B[key] !== ''                     // 排除空字符串 (按需调整)
			    ) {
			      A[key] = B[key];
			    }
			  }
			  return A;
			},
			// 关闭Model 新增厂家
			handleMacnFactClose(done) {
			    done();
			},
		},
	}
</script>

<style lang="less" scoped>
	
	// content
	.content {
		height: 100%;
		width: 100%;
		// header
		.header {
			
		}

		// main
		.main {
			.addModel{
				.innerModel-table {
				  width: 100%;
				  overflow-x: auto;
				  
				  /deep/ .el-table {
				    width: 100% !important;
				    max-width: 100%;
				    
				    .el-table__body-wrapper {
				      overflow-x: auto;
				    }
				    
				    .el-table__header-wrapper {
				      overflow-x: hidden;
				    }
				    
				    .cell {
				      white-space: nowrap;
				      overflow: hidden;
				      text-overflow: ellipsis;
				    }
				  }
				  
				  /* 自定义滚动条样式 */
				  /deep/ ::-webkit-scrollbar {
				    height: 6px;
				    width: 6px;
				  }
				  
				  /deep/ ::-webkit-scrollbar-thumb {
				    background-color: #c1c1c1;
				    border-radius: 3px;
				  }
				  
				  /deep/ ::-webkit-scrollbar-track {
				    background-color: #f1f1f1;
				  }
				}
				// 穿透
				/deep/ .el-dialog__header{
					padding: 4px;
					background-color: #007bb0;
				}
				/deep/ .el-dialog__title{
					font-size: 12px;
					color: #fff;
				}
				/deep/ .el-dialog__headerbtn .el-dialog__close{
					color: #fff;
				}
				/deep/ .el-dialog__headerbtn{
					top: 10px;
				}
				/deep/ .el-input--mini .el-input__inner{
					height: 26px;
				}
				
				
				.form{
					/deep/ .el-form{
						padding: 12px;
						display: flex;
					}
					/deep/ .el-tabs--border-card{
						width: 100%;
					}
					/deep/ .el-form-item__content{
						display: flex;
						font-size: 12px;
					}
					/deep/ .el-form-item{
						margin-top: -8px;
					}
					/deep/ .el-form-item__label{
						font-size: 12px;
						display: flex;
					}
					/deep/ .el-select-dropdown__item{
						border: 1px solid #eeeeee;
						padding: 0;
						height: 28px;
						#optionItem {
							width: 100%;
							height: 100%;
							display: flex;
							align-items: center;
							text-align: center;
							justify-content: center;
							span{
								display: inline-block;
								font-size: 12px;
								width: 88px;
								height: 30px;
								line-height: 30px;
								white-space: nowrap;      /* 禁止换行 */
								overflow: hidden;         /* 隐藏溢出内容 */
								text-overflow: ellipsis;  /* 溢出显示省略号 */
							}
						}
					}
				}
			}
		}

		// feet
		.feet {
			
		}
		.GetManuFact{
			// 穿透
			/deep/ .el-dialog__header{
				padding: 4px;
				background-color: #007bb0;
			}
			/deep/ .el-dialog__title{
				font-size: 12px;
				color: #fff;
			}
			/deep/ .el-dialog__headerbtn{
				top: 10px;
			}
			/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
				color: firebrick;
			}
			/deep/ .el-dialog__headerbtn .el-dialog__close{
				color: #fff;
			}
			/deep/ .el-icon-arrow-left:before {
			    content: "\e67d";
			    font-size: 18px;
			}
			/deep/ .el-icon-arrow-down:before {
			    content: "\e659";
			    font-size: 12px;
			}
			/deep/ .el-dropdown-menu__item{
				font-size: 12px;
			}
			/deep/ .el-dropdown-menu__item{
				font-size: 12px;
			}
			/deep/ .el-dialog__body{
				padding: 15px 20px;
			}
			
			// form
			.form{
				/deep/ .el-select-dropdown__item{
					border: 1px solid #eeeeee;
					padding: 0;
					height: 28px;
					width: 100%;
					#optionItem {
						 user-select: text !important;
						  -webkit-user-select: text !important;
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						text-align: center;
						justify-content: center;
						span{
							display: inline-block;
							font-size: 12px;
							width: 128px;
							height: 30px;
							line-height: 30px;
							white-space: nowrap;      /* 禁止换行 */
							overflow: hidden;         /* 隐藏溢出内容 */
							text-overflow: ellipsis;  /* 溢出显示省略号 */
						}
					}
				}
				/deep/ .el-select-dropdown__wrap{
					max-height: 168px;
				}
				/deep/ .el-form{
					padding: 12px;
					display: flex;
					align-items: center;
					border: 1px solid #DCDFE6;
				}
				// /deep/ .el-input{
				// 	width: 168px;
				// }
				/deep/ .el-input--mini .el-input__inner{
					height: 26px;
				}
				/deep/ .el-form-item{
					margin-bottom: 6px;
					display: flex;
				}
				/deep/ .el-form-item__content{
					display: flex;
					font-size: 12px;
					width: 100%;
					/deep/ .el-table{
						width: 100%;
					}
				}
				/deep/ .el-form-item__label{
					font-size: 12px;
					width: 88px;
					text-align: left;
				}
			}
		}
	}
</style>